<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
		
		
		<script type="text/javascript" src="js/ender.js"></script>
		<script type="text/javascript" src="js/zepto.js"></script>

		
		<script type="text/javascript">	
			
		
		
			Zepto(document).ready(function(){
				
			
								
				Zepto('ul').css('left','0px');
				var centerPosition = Zepto('.arrow').get(0).offsetLeft + Zepto('.arrow').width()/2
				//console.log(centerPosition);
				//console.log(centerPosition*2 +  "||||||||||||||||||" + $('.arrow').parent().width())
				Zepto('.date li').on('click',function(event){
					
					
					var $movable = Zepto(this);
					
					
					//箭头的左偏移量+箭头宽度/2 -（li的宽度/2+li的左偏移量）
					
					mw = $movable.width()/2 + $movable.get(0).offsetLeft;
											
					var leftL = centerPosition - mw;
					
					//$(this).parent().animate({left:leftL + "px"},600);
					
					Zepto(this).parent().animate({left:leftL + "px"},{duration:400,complete:function(){
						
						Zepto(this).children().removeClass("current");
						Zepto(this).children().addClass("normal");
						Zepto(event.target).addClass("current");
						
					}});
					
					
					var curIndex = Zepto(this).index();
					//console.log(curIndex);
					
					myScroll.scrollToPage(curIndex,0);

				});
			});	
			
		</script>
		
		
		<script type="text/javascript">
		
			$(document).ready(function () {
			    this.myScroll = $('#wrapper').iScroll({
			    snap: true,
			    momentum: false,
			    hScrollbar: false,
			    onScrollEnd: function () {
			      document.querySelector('.date > li.current').className = '';
			      document.querySelector('.date > li:nth-child(' + (this.currPageX+1) + ')').className = 'current';
			    }
			   })
			});
		</script>
		
		
		
		<style type="text/css">
		
			*{
				margin: 0px;
				padding: 0px;
				
			}
		
			.arrow{
				height:0px;
				width:0px;		
				border: 30px solid transparent;
				border-top-style: solid;	
				border-top-color: red;	
				margin: 0px auto;
			}
			.arrow>div{
				height: 0px;
				width: 0px;
				border:28px solid transparent;			
				border-top-style:solid;
				border-top-color: gray;
				position: relative;
				top: -30px;
				left: -28px;
				
			}
			
			.slider{
				position:relative;
				width:100%;
				background:yellow;				
				border-top: 1px solid gray;
				border-bottom: 1px solid gray;
				
				text-align: center;
				
			}
		
			.slider ul{
				position:relative;
				vertical-align: middle;
			}
			
			.slider .date li{
				border:none;
				width:100px;
				background:gray;
				border: none;
				display:inline-block;
			}
			
			.normal{
				font-size:medium;
				font-weight:normal;
				color:black;
				width: 32px;
				height: 28px;
			}
			
			.current{
				font-size:larger;
				font-weight:bolder;
				color:purple;
				width: 40px;
				height: 35px;
			}
			
/*iscroll*/			
			#wrapper {
			  width:300px;
			  height:160px;
			

			  position:relative;
			  z-index:1;
			  overflow:hidden;
			
			  background:#aaa;
			  -webkit-border-radius:10px;
			  -moz-border-radius:10px;
			  -o-border-radius:10px;
			  border-radius:10px;
			  background:#e3e3e3;
			}
			
			#scroller {
			  width:1500px;
			  height:100%;
			  float:left;
			  padding:0;
			}
			
			#scroller ul {
			  list-style:none;
			  display:block;
			  float:left;
			  width:100%;
			  height:100%;
			  padding:0;
			  margin:0;
			  text-align:left;
			}
			
			#scroller li {
			  -webkit-box-sizing:border-box;
			  -moz-box-sizing:border-box;
			  -o-box-sizing:border-box;
			  box-sizing:border-box;
			  display:block; float:left;
			  width:300px; height:160px;
			  text-align:center;
			  font-family:georgia;
			  font-size:18px;
			  line-height:140%;
			}

			
			
			
		</style>
		
	</head>

	<body>
		<div>
			<div id="wrapper">
			  <div id="scroller">
			    <ul id="thelist">
			      <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
			      <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
			      <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
			      <li><strong>4</strong> <em>Zeroth Law:A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
			      <li><strong>5</strong> <em>Lyuben Dilov's Forth law:A robot must establish its identity as a robot in all cases.</em></li>
			    </ul>
			  </div>
			</div>
			<div class="slider">
				<div class='arrow'>
					<div></div>
				</div>
				<ul class="date" >
					<li id="6.10">6.10</li>
					<li id="6.11">6.11</li>
					<li id="6.12" class="current">6.12</li>
					<li id="6.13">6.13</li>
					<li id="6.14">6.14</li>	
				</ul>				
			</div>
		</div>
	</body>
</html>
